<template>
  <div class="app-container commercial-content">
    <EzForm
      ref="menuForm"
      :formMap="formMap"
      v-model="formData"
      @search="searchRequest"
    ></EzForm>
    <BtnGroup ref="btnGroup" :btns="btns" @handle="handleBtnGroup" />
    <!-- 工具栏 end-->

    <div>
      <el-table
        v-loading="loading"
        ref="table"
        :key="randomKey"
        :data="lists"
        :height="st"
        lazy
      >
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column label="ID" width="240">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品名称">
          <template slot-scope="scope">
            <span>{{ scope.row.goods_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品单价" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.goods_price }}</span>
          </template>
        </el-table-column>
        <el-table-column label="下单数量" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.goods_quantity }}</span>
          </template>
        </el-table-column>
       
        <el-table-column label="订单金额" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.order_amount | priceJudge }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.order_state_label }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发货时间" width="160" prop="created_at">
          <template slot-scope="scope">{{
            scope.row.shipped_time | dateJudge
          }}</template>         
        </el-table-column>
        <el-table-column label="收货时间" width="160" prop="receipt_time">
          <template slot-scope="scope">{{
            scope.row.receipt_time | dateJudge
          }}</template>         
        </el-table-column>
        <el-table-column label="创建时间" width="160" prop="created_at">
          <template slot-scope="scope">{{
            scope.row.created_at | dateJudge
          }}</template>         
        </el-table-column>
        
      </el-table>

      <pagination
        ref="paginationTotal"
        :page="currentPage"
        :total="total"
        :size="pageSize"
        @sizeChange="sizeChange"
        @currentChange="currentChange"
      />
    </div>

    <!--新建 弹框-->
    <el-dialog
      class="add-dialog"
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      :before-close="modalClose"
      :close-on-press-escape="false"
      append-to-body
    >
      <div v-loading="dialogloading">
        <el-form
          ref="manuForm"
          :model="orderForm"
          label-width="180px"
          size="small"
          :rules="rules"
        >

        <el-form-item label="商品名称" prop="goods_name" :rules="$rule.required">
          <el-input
            v-model="orderForm.goods_name"
            size="small"
            placeholder="请输入商品名称"
            clearable
            maxlength="100"
          ></el-input>
        </el-form-item>

        <el-form-item label="商品图片链接" prop="goods_img" :rules="$rule.required">
          <el-input
            v-model="orderForm.goods_img"
            size="small"
            placeholder="请输入商品图片链接"
            clearable
            maxlength="100"
          ></el-input>
        </el-form-item>     
        <el-form-item label="商品单价" prop="goods_price" :rules="$rule.required">
          <el-input
            v-model="orderForm.goods_price" 
            size="small"
            placeholder="请输入商品单价"
            clearable
            maxlength="10"
          ></el-input>
        </el-form-item>

        <el-form-item label="商品数量" prop="goods_num" :rules="$rule.required">
          <el-input
            v-model="orderForm.goods_quantity"
            size="small"
            placeholder="请输入商品数量"
            clearable
            maxlength="5"
          ></el-input>
        </el-form-item>

        </el-form>
        <div class="tool2" style="margin-top: 45px">
          <el-button type="primary" size="medium" @click="handleOrderSubmit"
            >确定</el-button
          >
          <el-button size="medium" @click="modalClose">取消</el-button>
        </div>
      
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      randomKey: Math.random(),
      formMap: [
        {
          label: "订单号",
          key: "id",
          type: "input",
        },
        {
          label: "订单状态",
          key: "order_state",
          type: "select",
          options: [],
        },
        {
          label: "",
          key: "created_at",
          type: "cratedate",
        },
      ],
      btns: [
      ],
      formData: {
        id: "", //id
        order_state: "",//状态
        created_at: [],
      },
      orderForm: {
        goods_name: "",
        goods_img: "",
        goods_price: "",
        goods_quantity: "",
      },
      lists: [],
      dialogloading: true,
      loading: false,

      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      total: 0,
      // 个数选择器（可修改）
      pageSizes: [50, 100, 200],
      // 默认每页显示的条数（可修改）
      pageSize: 30,

      st: 0,
      dialogVisible: false,
      dialogCancelVisible:false,
      diaAddress: false,
      dialogTitle: "创建",
      isEdit: false,
      choosePlace: [],
      dictList: [],
      place: [],
      country: [],

      // 验证表单
      rules: {
        
      },
    };
  },
  watch: {
    formData: {
      handler(newName, oldName) {

        // ...
      },
      deep: true,
    },
  },
  created() {
    this.handleRequest();
    this.handleDict();
  },
  mounted() {
    const that = this;
    that.$util.autoHeight(that, that.$refs.table.$el);
  },
  methods: {
    alterData(row, column) {
      row.isShow = false;
      this.refreshTable();
    },
    refreshTable() {
      this.randomKey = Math.random();
    },

    /**
     * 头部按钮列表
     */
    handleBtnGroup(evt) {
      let { handle } = evt;
      switch (handle) {
        case "new":
          this.handleNewOrder();
          break;
        case "search":
          this.handleRequest();
          break;      
        default:
          break;
      }
    },
    
    /**
     * 字典项目
     */
     async handleDict(that) {
      const { result } = await this.$.purchase.dict();
      this.formMap[3].options = result['order_state'];
      this.dictList = result;
    },
    /**
     * 关闭对话框
     */
    modalClose() {
      this.dialogVisible = false;
      this.dialogCancelVisible = false;
      this.diaAddress = false;
    },

    /**
     *  搜索
     */
    handleSearch(statu) {
      this.currentPage = 1;
      this.handleRequest();
    },
    searchRequest() {
      this.currentPage = 1;
      this.handleRequest();
    },

  // 新增订单
  async handleNewOrder() {
    const that = this
    this.dialogloading = false;
    this.dialogTitle = '新增订单';      
    this.dialogVisible = true;
  },
    // 提交
    handleOrderSubmit() {
      const that = this;
      that.$refs.manuForm.validate(async (v) => {
        if (!v) {
          return false;
        }

        try {
          that.dialogloading = true;
          const { result } = await that.$.purchase.create(that.cashoutForm);
          that.dialogloading = false;
          that.dialogVisible = false;
          that.diaAddress = false;
          that.$message({ type: "success", message: "新建订单成功" });
          that.handleSearch();
          // 清空 orderForm 的项目值
          that.orderForm.goods_name = '';
          that.orderForm.goods_img = '';
          that.orderForm.goods_price = '';
          that.orderForm.goods_quantity = '';
        } catch (e) {
          that.dialogloading = false;
        }
      });
    },
    /**
     * 弹框的行更改
     */
    rowChange(e) {
      console.log(e);
    },
    sizeChange(e) {
      const that = this;
      that.currentPage = 1;
      that.pageSize = e;
      that.handleRequest();
    },
    currentChange(e) {
      this.currentPage = e;
      this.handleRequest();
    },
    /**
     * 请求列表
     */
    async handleRequest() {
      const that = this;

      const {
        currentPage,
        pageSize,
        created_at,

        formData,
      } = that;
      let o = {
        page_size: pageSize,
        page: currentPage,
      };

      o.start_created_at = !!formData.created_at ? formData.created_at[0] : "";
      o.end_created_at = !!formData.created_at ? formData.created_at[1] : "";

      that.$util.ext(that.formData, o);
      console.log("that.formData", that.formData);

      try {
        that.loading = true;
        const { result } = await that.$.purchase.purchaseList(that.formData);
        that.total = result.pagination.total_count;
        that.$refs.table.bodyWrapper.scrollTop = 0;
        result.list.map((item, index) => {
          item.index = index;
          item.isShow = false;
        });
        that.lists = result.list;
        console.log("list", that.lists);
        that.loading = false;
      } catch (e) {
        that.loading = false;
      }
    },

    handleSelect() {
      this.currentPage = 1;
      this.handleRequest();
    },
  },
};
</script>

<style lang="scss" scoped>
.inp1 {
  flex: 1;
  margin-right: 12px;
}

.supname {
  margin: -18px 0 0 12px;
}

.label {
  font-size: 13px;
  margin-right: 5px;
}
</style>
<style>
/* .add-dialog .el-form-item__content {
  display: flex;
  align-items: center;
} */
.add-dialog .edit-tips {
  color: #c0c4cc;
  font-size: 12px;
  line-height: 1;
  position: absolute;
  padding-top: 2px;
  top: 100%;
  left: 0;
}
.add-dialog .dev-tips {
  color: #c0c4cc;
  font-size: 12px;
  line-height: 1;
  position: absolute;
  top: 100%;
  left: 0;
}
.add-dialog .copy-btn {
  margin-left: 24px;
}
</style>